<template>
  <div id="centerRight1">
    <chartBox title="“防”" :border="false">
      <div class="kpi_map chart_box_bg">
        <!--<img  src="@/assets/img/fang.png" alt="">-->
        <div class="kpi_map_bg">
          <svgaVuePlayer
              id="svgaplayer_fang"
              :src="('/static/frames/fang.svga')"
          ></svgaVuePlayer>
        </div>
        <div class="line flex_center">
          <div class="kpi_item_1">
            <div class="txt">
              刑事警情
            </div>
            <div class="num">
              {{ apiData.xingShiNum || 0 }}
            </div>
          </div>
          <div class="kpi_item_1">
            <div class="txt">
              治安警情
            </div>
            <div class="num">
              {{ apiData.zhiAnNum || 0 }}
            </div>
          </div>
        </div>
        <div class="line flex_center mt-52">
          <div class="kpi_item_2">
            <div class="txt">
              电诈警情
            </div>
            <div class="num">
              {{ apiData.dianZhaNum || 0 }}
            </div>
          </div>
          <div class="kpi_item_2">
            <div class="txt">
              盗窃警情
            </div>
            <div class="num">
              {{ apiData.daoQieNum || 0 }}
            </div>
          </div>
        </div>
        <div class="line flex_center mt-52">
          <div class="kpi_item_1">
            <div class="txt">
              故意毁坏警情
            </div>
            <div class="num">
              {{ apiData.guYiSunCaiNum || 0 }}
            </div>
          </div>
          <div class="kpi_item_1">
            <div class="txt">
              八类重点案件发案
            </div>
            <div class="num">
              {{ apiData.zhongDianNum || 0 }}
            </div>
          </div>
        </div>
      </div>
    </chartBox>
  </div>
</template>

<script>
import chartBox from '_c/chartBox.vue'
// import SequenceSpriteAnimation from '_c/SequenceSpriteAnimation.vue'
import svgaVuePlayer from '_c/svgaVuePlayer.vue'
export default {
  components: {chartBox, svgaVuePlayer},
  props: {
    apiData: {}
  },
  watch: {},
  created() {
    // 生成 100 张图片的 URL 数组，图片命名格式：frame_001.png ~ frame_100.png
    for (let i = 0; i <= 99; i++) {
      let num = i.toString().padStart(3, '0')
      this.frameUrls.push(`/static/frames/fang/frame_${num}.png`)
    }
  },
  data() {
    return {
      frameUrls: []
    }
  },
  methods: {}
}
</script>

<style lang="scss" scoped>
$box-width: 472px;
$kpi1-width: 187px;
$kpi2-width: 127px;
$font-family: PingFang SC, PingFang SC, sans-serif;

#centerRight1 {
  width: $box-width;

  .kpi_map {

    padding: 24px 18px;
    position: relative;

    .kpi_map_bg {
      position: absolute;
      width: 208px;
      height: 208px;
      left: 50%;
      top: 50%;
      transform: translateX(-50%) translateY(-50%);
    }
  }

  .line {
    justify-content: space-between;
  }

  .kpi_item_1, .kpi_item_2 {
    background-repeat: no-repeat;
    background-position: center center;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 12px;
    background-size: 100%;

    .num {
      font-family: $font-family;
      font-weight: 500;
      font-size: 16px;
      color: #16B3E0;
      line-height: 16px;
      text-align: right;
    }

    .txt {
      font-family: $font-family;
      font-weight: 400;
      font-size: 14px;
      color: #B4D7EE;
      line-height: 14px;
      text-align: center;
    }
  }

  .kpi_item_1 {
    background-image: url(@/assets/img/right_1kpi1.png);
    min-width: $kpi1-width;
  }

  .kpi_item_2 {
    background-image: url(@/assets/img/right_1kpi2.png);
    min-width: $kpi2-width;
  }
}

.mt-52 {
  margin-top: 52px;
}
</style>
